<template>
  <div class="app">
    <!-- <ParentComponent></ParentComponent> -->
    <topSearch @updateSearch="updateSearch"></topSearch>
    <div class="content-box">
      <!-- <homePage></homePage>  -->
      <!-- <filmsPage :search="search"></filmsPage> -->
      <!-- <filmDetailPage></filmDetailPage>  -->
    <transition
        leave-active-class="animated slideOutLeft"
        enter-active-class="animated slideInRight"
    >
        <keep-alive include="home">
            <router-view></router-view>
        </keep-alive>
    </transition>
    </div>
    <component :is="$route.meta.bottomName||''"></component> 
    <FiexdBtn v-show="this.$route.meta.showbun"></FiexdBtn>
  </div>
</template>

<script>
// import filmsPage from "./views/filmsPage"
import topSearch from "./components/topSearch"
// import homePage from "./views/homePage"
// import filmDetailPage from "./views/filmDetailPage"
import bottom from "./components/bottom"
import ParentComponent from './componentData/ParentComponent'
import FiexdBtn from './components/FiexdBtn.vue'

export default {
    name: "app",
components: {
    // filmsPage,
    topSearch,
    // homePage,
    // filmDetailPage,
    bottom,
    ParentComponent,
    FiexdBtn
  },
  data(){
    return {
        search:'',
    }
  },

  methods: {
    updateSearch(obj){
        this.search = obj
    },
  },
  
};
</script>

<style lang="less">
//全局
*{
    padding: 0px;
    margin: 0px;
    background-color: @dark;
}
.app{
    max-width: 750px;
    margin: 0 auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: @light;
    overflow: hidden;
    *{
        background-color: @light;
    }
}
// 标题名称
.list-name{
    // margin-bottom: 0.2rem;
    >span{
        display: inline-block;
        margin: 0.24rem 0rem 0.24rem 0.1rem;
        padding: 0rem 0.2rem 0rem 0.1rem;
        font-size: 0.32rem;
    }
    >span:first-child{
        border-left: 4px solid @blue;
    }
    >span.list-more{
        float: right;
        font-size: 0.28rem;
        color: @blue;
    }
}
// 首页 分类页 公用样式
.list-content,.content-list{
    >.film-item{
        width: 2.35rem;
        height: 4.55rem;
        display: inline-block;
        margin-left: 0.1rem;
        vertical-align: top;
        >.film-img{
            height: 3.6rem;
            background-color: @gray-light;
            background-repeat: no-repeat;
            background-size: cover;
        }
        >.film-title{
            font-size: 0.26rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin: 0.1rem;
        }
    }
}

//评分
.film-source{
    margin: 0rem 0.1rem 0rem 0rem;
    >span{
        height: 0.22rem;
        width: 0.22rem;
        line-height: 0.22rem;
        margin-left: 0.1rem;
    }
    >.star-img{
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    >.open{
        background-image: url(../public/imgs/star-open.png);
    }
    >.close{
        background-image: url(../public/imgs/star-close.png);
    }
    >.star-source{
        padding-right: 0.1rem;
        font-size: 0.3rem;
    }
    >.star-tip{
        color:@gray;
        font-size: 0.28rem;
    }
}
</style>
<style lang="less" scoped>
.content-box{
    background-color: #cccccc;
    position: absolute;
    top: @topHeight;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
}

</style>


